<template>
    <div class="top-list">
         <musicList :songs="songs" :title="title" :bg-image="bgImage" ></musicList>
    </div>
</template>

<script>
import musicList from 'components/music-list/music-list'
import {getMusicList} from 'api/rank'
import {mapGetters} from 'vuex'
import {createSong,getSongVkey} from 'common/js/song.js'
export default {
    components:{
        musicList
    },
    mounted(){
        this._getMusicList(this.$route.params.uid)
    },
    computed:{
        title(){
           return this.topList.topTitle
        },
        bgImage(){
          return this.topList.picUrl
        },
      ...mapGetters(["topList"])
    },
    data(){
       return {
           songs:[]
       }
    },
    methods:{
        normalizeSongs(list){
        var ret=[]
        list.forEach(item => {
        if(item.data.songid&&item.data.albummid){
            getSongVkey(item.data.songmid).then((res) => {
            const vkey = res.data.items[0].vkey;
            ret.push(createSong(item.data,vkey))
            })
        }
        });
           return ret
        } ,
      _getMusicList(id){
         getMusicList(id).then(res=>{
             if(res.songlist){
                this.songs=this.normalizeSongs(res.songlist)
               console.log(this.songs) 
             }
         })
      }, 
    }
}
</script>
<style lang="stylus" scoped>

</style>


